<!--
 * @Author: chen jiao
 * @Date: 2021-07-06 09:39:44
 * @LastEditTime: 2021-12-16 16:48:12
 * @LastEditors: Please set LastEditors
 * @Description: 会员音视频审核
 * @FilePath: \ebc-admin\src\views\member\MemberAudit.vue
-->
<template>
  <div class="videoAudit">
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      @init-params="initParams"
      >
      <!-- 实名认证显示 -->
      <span
        slot="authState"
        slot-scope="scope"
        :style="`color:${
          scope.value.authState === '0'? '#909399' : '#67C23A'  
        }`"
      >
        {{
          scope.value.authState === '1' ? '未认证' : '已认证' 
        }}
      </span>
      <!-- 审核状态显示 -->
      <span slot="status" slot-scope="scope"
        :style="`color:${
          scope.value.status === 0 ? '#909399' : 
          scope.value.status === 1 ? '#67C23A' : '#FF3333'
        }`"
      >
        {{
          scope.value.status === 0 ? '待审核' :
          scope.value.status === 1 ? '已同意' : '已拒绝'
        }}
      </span>
      <!-- 审核类型 -->
      <span slot="type" slot-scope="scope">
        {{
          scope.value.type === 1 ? '音频' :
          scope.value.type === 2 ? '视频' : ''
        }}
      </span>
      <!-- 操作区 -->
      <template slot="operate" slot-scope="scope">
        <el-button v-if="scope.value.status === 0" type="text" size="small"  @click="auditBox(scope.value)">审核</el-button>
        <el-button type="text" size="small" @click="auditRecodeBox(scope.value)">审核记录</el-button>
      </template>
      </tab-list>
      <!-- 审核框 -->
      <el-dialog
        title="会员媒体审核"
        v-if="show"
        :visible.sync="show"
        width="30%"
        >
         <div v-if="type=='player'">
            <video-player
            ref="videoPlayer"
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :close-on-click-modal="false"
            :options="playerOptions"
         />
        </div>
        <div v-if="type=='video'">
          <aplayer :music="videoUpload.music"></aplayer>
        </div>
        <template>
          <span style="margin-right:10px">AI审核是否通过</span>
          <el-checkbox v-model='show' disabled>{{ autoAuditStatus?'是':'否'}}</el-checkbox>
        </template>
       
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="agree()">同 意</el-button>
          <el-button  @click="refusalBox">拒 绝</el-button>
        </span>
      </el-dialog>
      <!-- 审核拒绝弹窗 -->
     <el-dialog
       v-if="refusal" 
       title="会员信息审核"
       :visible.sync="refusal"
       width="40%"
       :close-on-click-modal="false"
       @open="$refs.form && $refs.form.resetForm()"
     >
        <edit-form
          ref="form"
          :rules="rules"
          :edit-list="editList"
          :form="form"
          @on-submit="refuseAuth(false, form.reason)"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="refusal = false">取 消</el-button>
          <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
        </span>
      </el-dialog>
     <!-- 会员审核记录框 -->
     <el-dialog
        title="会员审核记录"
        :visible.sync="show2"
        width="50%"
        >
         <tab-list
          ref="auditRecords"
          :searchs="searchs2"
          :isSearch="true"
          :list-hedar="listHedar2"
          :params="params2"
          @init-params="initParams2"
          :api-function="apiFunction2"
          >
        <!-- 审核状态显示 -->
        <span slot="status" slot-scope="scope"
            :style="`color:${
              scope.value.status === '0' ? '#909399' : 
              scope.value.status === '1' ? '#67C23A' : '#FF3333'
            }`"
          >
            {{
              scope.value.status === '0' ? '待审核' :
              scope.value.status === '1' ? '已同意' : '已拒绝'
            }}
        </span>
        <span slot="type" slot-scope="scope">
          {{
            scope.value.type === 1 ? '音频' :
            scope.value.type === 2 ? '视频' : ''
          }}
        </span>
          </tab-list>
       <span slot="footer" class="dialog-footer">
          <el-button @click="show2 = false">关 闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import TextList from '@/components/admin/text-list.vue'
import editForm from '@/components/admin/edit-form.vue'
import aplayer from 'vue-aplayer'
// 页面配置
import { listHedar ,searchs ,textList,editList,rules,searchs2,listHedar2,videoUpload,playerOptions} from './config/video.config.js'
// 接口
import { menberList2 ,auditList ,checkDetails ,check } from '@/api/member.js'
// 公共方法
import { asyncApiFun } from '@/utils/utils'

  export default {
    name:'MemberAudit',
    components: { 
      tabList, 
      TextList, 
      editForm,
      aplayer
      },
    data() {
      return {
        params:{} ,//列表初始参数
        listHedar,
        searchs,
        apiFunction : menberList2, //列表接口
        apiFunction2 : auditList,   //审核认证记录接口
        show:false,//审核框
        refusal:false, //审核拒绝框
        show2:false, //审核记录框
        textList,
        editList,
        rules,    //审核框校验规则
        form:{},
        type:'',
        detailInfo:{},  //
        listHedar2,
        searchs2,
        params2:{}, //审核记录框初始参数
        businessId:'',
        autoAuditStatus:false,  //AI审核结果
        videoUpload,  //音频
        playerOptions, //视频
      }
    },
    methods: {
      // 审核弹窗
      async auditBox({id,type}){
          this.type = type === 1 ? 'video' :'player'
          const [res] = await asyncApiFun(checkDetails, id)
          if (res) {
            this.show = true
            this.businessId = id
            this.videoUpload.music.src= res.data ? res.data.mediaUrl : ''
            this.playerOptions.sources[0].src = res.data ? res.data.mediaUrl : ''
            this.autoAuditStatus = res.data.autoAuditStatus
            
          }
      },
      // 审核弹窗-确定
      async agree(){
        const _parmas = {
          operation:true,
          id: this.businessId
        }
        const [res] = await asyncApiFun(check, _parmas)
        if(res) this.$refs.list.getList()
        this.show = false
      },  
      // 审核弹窗-拒绝
      refusalBox(){
        this.show = false
        this.refusal = true
      },
    // 拒绝审核-确定
     refuseAuth(){
        this.refusal = false
      },

      // 拒绝审核通过
    async refuseAuth(operation, reason) {
      const params = {
        operation,
        id: this.businessId
      }
      if (reason) params.reason = reason
      const [res] = await asyncApiFun(check, params)
      if (res) {
        this.$message.success(`${operation ? '已通过审核' : '已拒绝审核'}`)
        this.refusal = false
        this.$refs.list.getList()
      }
    },
    // 审核记录
      auditRecodeBox({memberId,type}) {
        this.params2.memberId = memberId
        this.params2.type = type
        this.show2 = true
        if(this.$refs.auditRecords) this.$refs.auditRecords.getList()
      },

    // 初始化参数
      initParams(param) {
        this.params = param
      },
    // 初始化参数
      initParams2(param) {
        // this.params2 = param
      }  
    }
    
  }
</script>

<style lang="scss" scoped>
.audio-box{
  margin-left:120px;

}
.result-box{
  color: #1890ff;
}
</style>